<!-- loading.html -->
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>IOT支持服务平台</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #1e1e1e;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .loader {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }

    .welcome{
      margin-top: 14px;
      color: #FFFFFF;
      font-size: 14px;
      letter-spacing: 2px;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="loader" id="loadingText">
    </div>
    <p class="welcome">欢迎进入支持服务平台,请稍等...</p>
  </div>
</body>

</html>